Les Listes à puces (XHTML)
Précieuses alliées des webmasters, les listes à puces concourent non seulement à strucurer les informations, mais aussi à la création des menus.
Il existe trois types différentes de listes à puces :
- Les listes non ordonnées : ce sont les listes à puces les plus couramment utilisées. Cette liste est d'ailleurs une liste non ordonnée.
- Les listes ordonées : chaque élément de la liste commence par un numéro (1,2,3...) ou une lettre (A,B,C). Ce type de liste est employé à chaque fois qu'il y a un ordre à suivre, par exemple, lorsqu'on doit indiquer une marche à suivre précise.
- Les listes de définitions : plus rares, elles permettent par exemple de créer un lexique. Chaque mot est alors associé à une définition. De telles listes sont associées dans les pages contenant des termes un peu difficiles, voir techniques, afin de les définir pour que les visiteurs ne soient pas perdus.
Chacune de ces listes trouve son utilité dans un contexte différent. Concernant le code XHTML, celui ci est très proche d'un type de liste à un autre.Commençons sans plus tarder par les listes non ordonnées.
Listes non ordonées
Une liste non ordonnée se place à l'intérieur des balises <ul></ul>. Ces balises doivent être situées à l'extérieur des paragraphes , comme le montre le code suivant :
<p> Ceci est un paragraphe situé avant la liste.</p>
<ul></ul>
<p> Ceci est un paragraphe situé après la liste.</p>
Pour l'instant, notre liste à puces n'affiche rien. Il va falloir la remplir.
Chaque élément de la liste est délimité par des balises <li></li> à l'intérieur de <ul></ul>.
Chaque <li></li> représente une puce.
Regardons le code suivant, pour mieux comprendre :
<p> Voici les 4 éléments :</p>
<ul>
<li> L'eau </li>
<li> Le feu </li>
<li> L'air </li>
<li> La terre </li>
</ul>
Listes ordonnées
Une liste ordonnée se construit exactement de la même manière qu'une liste non ordonnée. Seule la balise <ul> change : elle est remplacée par <ol>.
Voici un exemple de liste ordonnée :
<ol>
<li> Un </li>
<li> Deux </li>
<li> Trois </li>
<li> Quatre </li>
</ol>
Cette fois, le navigateur numérotera automatiquement chaque élément de la liste.
Remarque : Il est possible d'imbriquer des listes à puces dans une autre sans aucun problème. Pour cela il faut ouvrir une nouvelle balise <ul> à l'intérieur d'une puce <li>. Par exemple :
<p> Voici les différentes boissons que nous vous proposons :</p>
<ul>
<li> Coca-Cola </li>
<li> Eau
<ul>
<li>Eau plate </li>
<li> Eau gazeuse </li>
</ul>
</li>
<li>Jus de fruit
<ul>
<li>Jus d'ananas </li>
<li>Jus de pomme </li>
<li>Jus d'orange </li>
</ul>
</li>
</ul>
Voila une belle imbrication de listes à puces.
L'on peut imbriquer autant de listes à puces qu'on le veuille. Toutefois trop d'imbrications peuvent rendre les listes illisibles (au dela de trois niveaux). Par ailleurs,
la multiplication des listes est le symptôme d'une mauvaise organisation de l'information
En outre, il est possible de changer le type de numérotation. On peut par exemple utiliser une numérotation romaine (I, II, III, IV...) ou alphabétique (A, B, C, D). Pour changer la numérotation il faudra faire appel au CSS comme nous le verrons plus loin.
Liste de définitions
On utilise la balise <dl> pour délimiter le début et la fin d'une liste de définitions, tout comme on utilisait <ul> et <ol> pour les autres types de listes.
On a donc le code suivant pour commencer :
<dl>
</dl>
De plus, on n'utilise plus <li>. En effet, une liste de définitions est une succession de mots suivis de leur définition. On doit donc alterner des balises <dt> et <dd> :
- <dt> : indique le mot que l'on veut définir.
- <dd> : délimite la définition de ce mot.
Voici un exemple récapitulatif :
<p> Vocabulaire du parfait petit webmaster :</p>
<dl>
<dt> XHTML </dt>
<dd> Langage de balisage permettant la rédaction de pages web structurées. </dd>
<dt> CSS </dt>
<dd> Langage de description utilisé pour la mise en forme des pages Web. </dd>
</dl>
Voici une belle liste de définitions.
Concernant ces listes de définitions, il faut retenir que les éléments vont toujours par deux : d'abord le terme (<dt>) puis la définition qui correspond (<dd>).